<template>
  <div>
    <!-- 搜索 -->
    <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="16" :xl="2">
            <Search @searchClict="searchClict" :arrImg="arrImg" :imgData="imgData"></Search>
        </el-col>
    </el-row>
    <div style="">
        
    </div>  
    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      border
    >
      <el-table-column prop="createTime" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="nickName" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="className" label="班级" width="140">
      </el-table-column>
      <el-table-column prop="phonenumber" label="电话" width="120">
      </el-table-column>
      <el-table-column prop="prop" label="行程码截图" width="150">
        <template slot-scope="{ row, $index }">
          <img :src="row.healthImg" alt="" style="width: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="180">
        <template slot-scope="{ row, $index }">
          <el-button type="danger"size="medium" @click="delete1(row.id)">删除</el-button>
          <el-button type="info" size="medium" @click="updata(row.id)">修改</el-button>
          <!-- {{row}} -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="pagination">
      <span class="demonstration"></span>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { reqGetHealthInfo } from "../../../api/index";
import Search from '../../component/Search/index.vue'
export default {
  data() {
    return {
    input: '',
      tableData: [],//表格数据
      arrImg:[],
      imgData:[],
      pageNum: 1,
      pageSize:3,
      total:1,
    };
  },
  created() {
    this.getHealthInfo(this.pageNum,this.pageSize);
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    //获取健康码信息
    async getHealthInfo(pageNum,pageSize) {
      let result = await reqGetHealthInfo(pageNum,pageSize);
      // console.log(result);
      this.total=Number(result.total);
      result.rows.forEach(element => {
        this.arrImg.push(element.healthImg);
      });
      this.imgData=result.rows;
      // console.log(this.arrImg);
      this.tableData = result.rows;
    },
    //搜素组件传过来的事件
    searchClict(input){
      console.log(input)
    },
    // 删除
    delete1(id){
      console.log("删除",id);
      this.$message({
        showClose:true,
        message:"删除",
        type:"error"
      });
    },
    //修改信息
    updata(id){
      console.log("修改",id)
      this.$message({
        showClose:true,
        message:"修改",
        type:"warning"
      });
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize=val;
      this.getHealthInfo(this.pageNum,this.pageSize);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNum=val
      this.getHealthInfo(this.pageNum,this.pageSize);
    },
  },
  components:{
    Search
  }
};
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
